<template>
  <div class="order">
    <van-nav-bar
      title="我的订单"
      left-text="返回"
      left-arrow
      fixed
      @click-left="back"
    />
    <!-- 背景 -->
    <div class="order-box"></div>

    <div class="order-tad-box">
      <van-tabs
        v-model="tabIndex"
        color="#0c34ba"
        line-height="2px"
        title-active-color="#0c34ba"
        animated
        duration="0.35"
        @change="changeOrderStatus"
        sticky
        offset-top="46px"
      >
        <van-tab
          :title="item.title"
          v-for="(item, index) in itemType"
          :key="index"
        >
          <div class="tad-content">
            <div v-if="orderData.length > 0">
              <div
                class="order-content"
                v-for="(item, index) in orderData"
                :key="index"
              >
                <div class="o-title">
                  <div class="o-num">{{ item.orderId }}</div>
                  <div class="o-status">
                    <div class="o-finished" v-if="item.status === 2">
                      <div>已完成</div>
                      <div class="o-remove">
                        <van-icon name="delete-o" @click="remove(item.orderId, index)" />
                      </div>
                    </div>
                    <div v-else @click="receive(item)">确认收货</div>
                  </div>
                </div>
                <div>
                  <div class="o-pro-item" v-for="(v, i) in item.data" :key="i">
                    <ProList
                      class="not-padding"
                      :isHasCheckbox="false"
                      :proData="v"
                    >
                      <div class="o-count">x{{ v.count }}</div>
                    </ProList>
                  </div>
                </div>
                <div class="o-bottom">
                  <div class="empty-round">
                    <div class="round-box left-r"></div>
                    <div class="round-box right-r"></div>
                  </div>
                  <div class="o-date">
                    {{ item.date | formatDate("yyyy-MM-dd hh:mm:ss") }}
                  </div>
                  <div class="o-count-price">
                    <div class="o-c1">共计{{ item.total }}件</div>
                    <div class="o-c2">
                      总价: <span>&yen;{{ item.money }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <van-empty description="没有订单数据！" />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import ProList from "../components/ProList.vue";
export default {
  naem: "order",
  data() {
    return {
      tabIndex: 0,
      itemType: [
        {
          title: "全部",
        },
        {
          title: "进行中",
        },
        {
          title: "已完成",
        },
      ],
      //获取订单数据
      orderData: [],
    };
  },
  components: {
    ProList,
  },
  created() {
    this.getUserorderData(this.tabIndex);
    

  },
  methods: {
    //返回上一级
    back() {
      this.$router.go(-1);
    },
    //获取用户订单数据
    getUserorderData(status) {
      let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "get",
        url: "/findOrder",
        params: {
          tokenString,
          status,
        },
      })
        .then((res) => {
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
            return;
          }

          if (res.data.code === 70000) {
            //获取订单号
            let orderForm = [];
            res.data.result.forEach((v) => {
              v.small_img = v.smallImg;
              delete v.smallImg;
              if (orderForm.indexOf(v.oid) === -1) {
                orderForm.push(v.oid);
              }
            });

            let orderData = [];
            orderForm.forEach((v1) => {
              let order = {
                orderId: v1,
                date: "",
                total: 0,
                money: 0,
                status: -1,
                data: [],
              };
              //查找订单
              res.data.result.forEach((v2) => {
                if (v1 === v2.oid) {
                  if (!order.date) {
                    order.date = v2.createdAt;
                  }
                  if (order.status === -1) {
                    order.status = v2.status;
                  }
                  order.total += v2.count;
                  order.money += v2.count * v2.price;
                  order.money = Number(order.money).toFixed(2);
                  order.data.push(v2);
                }
              });
              orderData.push(order);
            });
            this.orderData = orderData;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //切换订单状态
    changeOrderStatus() {
      this.getUserorderData(this.tabIndex);
      
    },
    //确认收货
    receive(item) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认收货?",
        })
        .then(() => {
          let tokenString = sessionStorage.getItem("token");

          this.axios({
            method: "post",
            url: "/receive",
            data: {
              tokenString,
              oid: item.orderId,
            },
          })
            .then((res) => {
              if (res.data.code == 700) {
                //用户未登录, 拦截操作, 通知用户去登录
                this.$toast("请先登录");
                setTimeout(() => {
                  this.$router.push({ name: "Login" });
                }, 2000);

                return;
              }

              this.$toast(res.data.msg);

              if (res.data.code === 80000) {
                item.status = 2;
                //如果是在进行中订单确认收货，需要移除订单数据
                
                if (this.tabIndex === 1) {
                  for (let i = 0; i < this.orderData.length; i++) {
                    if (item.oid === this.orderData.orderId) {
                      this.orderData.splice(i, 1);
                      return;
                    }
                  }
                }
              }
            })
            .catch((err) => {});
        });
    },
    //删除
    remove(oid, index) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认删除?",
        })
        .then(() => {
          let tokenString = sessionStorage.getItem("token");

          this.axios({
            method: "post",
            url: "/removeOrder",
            data: {
              tokenString,
              oid
            },
          })
            .then((res) => {
              if (res.data.code == 700) {
                //用户未登录, 拦截操作, 通知用户去登录
                this.$toast("请先登录");
                setTimeout(() => {
                  this.$router.push({ name: "Login" });
                }, 2000);

                return;
              }

              this.$toast(res.data.msg);

              if (res.data.code === 90000) {
                //删除数据
                this.orderData.splice(index,1)
              }
            })
            .catch((err) => {});
        });
    },
  },
};
</script>

<style lang="less" scoped>
.order {
  padding-top: 46px;
  .order-box {
    height: 160px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #0c34ba;
  }
  .order-tad-box {
    min-height: 20px;
    margin: 0 10px;
    background-color: #fff;
    position: relative;
    top: -40px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
  }
  .tad-content {
    background-color: #f7f7f7;
  }
  .order-content {
    margin-top: 10px;
    padding: 10px;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .o-title {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .o-num {
    margin-right: auto;
  }
  .o-finished {
    display: flex;
  }
  .o-remove {
    width: 20px;
    height: 20px;
    color: #666;
    font-size: 20px;
    margin-left: 10px;
  }
  .o-pro-item {
    margin-bottom: 10px;
  }
  .not-padding {
    padding: 0;
  }

  .o-count {
    color: #666;
    font-size: 14px;
  }
  .o-bottom {
    padding: 10px 0 0;
    margin-top: 20px;
    border-top: 1px dashed #e8e8e8;
    position: relative;
  }
  .empty-round {
    position: relative;
    top: -8px;
    left: 0;
    height: 16px;
    width: 100%;
    display: flex;
  }
  .round-box {
    width: 10px;
    height: 16px;
    border-radius: 50%;
    background-color: #f7f7f7;
    position: relative;
  }
  .left-r {
    left: -8px;
    margin-right: auto;
  }
  .right-r {
    right: -18px;
  }
  .o-date {
    color: #999;
    margin-bottom: 10px;
    font-size: 14px;
  }
  .o-count-price {
    display: flex;
    align-items: center;
  }
  .o-c1 {
    margin-right: auto;
    font-size: 14px;
    color: #666;
  }
  .o-c2 {
    font-size: 14px;
    color: #0c34ba;
    font-weight: bold;
  }
}
</style>